
<style scoped>
.top{
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}
::v-deep .el-tag {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
    height: 32px;
    padding: 0 32px;
    line-height: 30px;
    font-size: 15px;
    color: #409EFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
}
::v-deep .el-tag {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
        height: 45px;
    padding: 0 32px;
    line-height: 45px;

    font-size: 15px;
    color: #409EFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
}
</style>
<!-- tsx -->
<template>
  <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 每 日 收 支 (单位/元) </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          <div class="top">
            <el-tag  size="medium">会员总余额:{{messageData.cashAmount}}</el-tag>
           <el-tag  size="medium">礼包总收入:{{messageData.packageAmount}}</el-tag>
            <el-tag  size="medium">积分商城总收入:{{messageData.goodsAmount}}</el-tag>
             <el-tag  size="medium">礼包直推总支出:{{messageData.ptAmount}}</el-tag>
              <el-tag  size="medium">管理奖总支出:{{messageData.ztAmount}}</el-tag>
               <el-tag  size="medium">积分商城总支出:{{messageData.fxAmount}}</el-tag>
          </div>
               <el-table
                :data="messageData.list"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="date" label="时间"  align="center"></el-table-column>
                <el-table-column prop="packageAmount" label="礼包收入"  align="center"></el-table-column>
                <el-table-column prop="goodsAmount" label="积分商城收入"  align="center"></el-table-column>
                <el-table-column prop="ptAmount" label="礼包直推支出"  align="center"></el-table-column>
                <el-table-column prop="ztAmount" label="管理奖支出"  align="center"></el-table-column>
                <el-table-column prop="fxAmount" label="积分商城支出"  align="center"></el-table-column>
                
            </el-table>
        </div>
  </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryStatisticsInfo } from '@/api/finance';
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
data() {
 // 这里存放数据
  return {
    messageData:{}
  }
},
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
   getData(){
     QueryStatisticsInfo().then(res => {
      //  console.log(res)
      this.messageData = res.Data
     })
   }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getData()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>